<template>
  <div>
    <component :is="componentType" :cell="graphCell" :message="message" :direction="direction" :key="graphCell?.id" ref="currentTemplates" />
    <!-- <a-popover
        :open="tipsVisible"
        placement="top"
        :getPopupContainer="bindPopupContainer"
        :overlayClassName="isJsonMsg ? 'poperlay-json' : 'poperlay-str'"
        >
        <template #content>
          <vue-json-pretty v-if="isJsonMsg" :path="'res'" :deep="2" :data="message ? message : ''" />
          <span v-else>{{ message ? message : '' }}</span>
        </template>
      </a-popover> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineExpose, computed, unref, reactive, watch, defineEmits, defineProps, toRaw, nextTick } from 'vue';
  import VueJsonPretty from 'vue-json-pretty';
  import 'vue-json-pretty/lib/styles.css';
  import Comment from './comment.vue';
  import Edge from './edge.vue';
  import ExecuteSql from './executeSql.vue';
  import ForkJoin from './forkJoin.vue';
  import Function from './function.vue';
  import Jvppeteer from './jvppeteer.vue';
  import Loop from './loop.vue';
  import Output from './output.vue';
  import Process from './process.vue';
  import Request from './request.vue';
  import Root from './root.vue';
  import Script from './script.vue';
  import Start from './start.vue';
  import Variable from './variable.vue';
  import Ocr from './ocr.vue';

  const currentTemplates = ref();
  // TIP提示是否展示
  // const tipsVisible = ref<boolean>(true);
  // TIP提示所需依附的元素
  let nodeElement = unref('');
  let childNode = ref(null);
  // 组件列表
  const COMPONENT_LIST = {
    comment: Comment,
    edge: Edge,
    executeSql: ExecuteSql,
    forkJoin: ForkJoin,
    function: Function,
    jvppeteer: Jvppeteer,
    loop: Loop,
    output: Output,
    process: Process,
    request: Request,
    root: Root,
    script: Script,
    start: Start,
    variable: Variable,
    ocr: Ocr,
  };
  // 事件
  // const emits = defineEmits(['changeMsgElement']);
  // 属性
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    graphCell: { type: Object },
    message: { type: Object },
    showTips: { type: Boolean },
  });
  // 组件类型
  const componentType = computed(() => {
    let template = 'root';
    if (props.graphCell?.edge === true || props.graphCell?.edge === 1) {
      template = 'edge';
    } else if (props.graphCell?.data && (props.graphCell?.data.get === undefined || props.graphCell?.data.get('shape') === undefined)) {
      template = 'root';
    } else {
      template = props.graphCell?.data.get('shape') || 'root';
    }
    return COMPONENT_LIST[template];
  });

  // message是否为JSON对象
  // const isJsonMsg = computed(() => {
  //   return Array.isArray(props.message) || typeof props.message === 'object';
  // });

  // 监控消息
  watch(
    () => props.message,
    (val) => {
      if (childNode.value) {
        childNode.value.classList.remove('poperlay');
      }
      if (val && props.showTips) {
        let { key, event } = val;
        setTimeout(() => {
          propertiesTipsBind(key, event);
        }, 500);
      }
    },
    { immediate: true, deep: true }
  );

  function propertiesTipsBind(key, type) {
    const currentTemplate = toRaw(currentTemplates.value);
    if (type === 'request-parameter') {
      currentTemplates.value.activeKey = 'paramsConfig';
    }
    if (type === 'request-cookie') {
      currentTemplates.value.activeKey = 'cookieConfig';
    }
    if (type === 'request-header') {
      currentTemplates.value.activeKey = 'headerConfig';
    }
    if (type === 'request-body') {
      currentTemplates.value.activeKey = 'bodyConfig';
    }
    let popupContainer;
    popupContainer = currentTemplate[key];
    if (popupContainer == undefined && (type == 'common' || type == 'request-parameter' || type == 'request-header' || type == 'request-cookie')) {
      popupContainer = currentTemplate['tabledata'][key];
    }
    // if(!popupContainer){
    //   popupContainer = currentTemplate['otherConfig'];
    // }
    if (popupContainer) {
      nodeElement = toRaw(popupContainer).$el;
      childNode.value = nodeElement.getElementsByTagName('input')[0];
      childNode.value.classList.add('poperlay');
      childNode.value.scrollIntoView(false);
    }
    //  else {
    //   childNode.value.classList.remove('poperlay');
    // }
    //emits('changeMsgElement', nodeElement, tipsVisible.value);
  }

  /**
   * 获得气泡提示的父节点
   */
  // function bindPopupContainer() {
  //   if (nodeElement) {
  //     return nodeElement;
  //   }
  // }
</script>

<style lang="less">
  // .poperlay-json {
  //   top: -150px !important;
  //   left: 200px !important;
  // }
  // .poperlay-json .ant-popover-inner-content {
  //   min-height: 100px;
  //   max-height: 150px;
  // }
  // .poperlay-str {
  //   top: -60px !important;
  //   left: 200px !important;
  // }
  // .poperlay-str .ant-popover-inner-content,
  // .poperlay-json .ant-popover-inner-content {
  //   font-weight: bold;
  //   font-family: Consolas;
  //   font-size: 12px;
  //   color: #555;
  //   overflow: auto;
  //   min-width: 60px;
  //   max-width: 600px;
  //   min-height: 40px;
  //   white-space: nowrap;
  // }
  // .poperlay-str .ant-popover-content,
  // .poperlay-json .ant-popover-content {
  //   box-shadow: 2px 0px 5px 1px rgba(0, 0, 0, 0.5);
  // }
  .poperlay {
    border: solid 2px #cf1322;
  }
</style>
